﻿<div id="app" class="common-layout" style="max-width: max-content;">
    <div id="tableBlock">
        <!-- 查询区域 -->
        <div class="search-area">
            <!-- 货品查询表单 -->
            <div class="search-row">
                <div class="search-item">
                    <label>货品：</label>
                    <el-input type="text" v-model="searchForm.goodsName" class="formTableInput" placeholder="请输入货品名称/编号"></el-input>
                </div>
                <div class="search-item">
                    <label>货品类型：</label>
                    <el-select v-model="searchForm.goodsType" class="formTableSelect" placeholder="请选择"></el-select>
                </div>
                <div class="search-item">
                    <label>单位：</label>
                    <el-select v-model="searchForm.unit" class="formTableSelect" placeholder="请选择"></el-select>
                </div>
                <div class="search-item">
                    <label>仓库名称：</label>
                    <el-select v-model="searchForm.warehouseName" class="formTableSelect" placeholder="请选择"></el-select>
                </div>
                <div class="search-item">
                    <label>货品条码：</label>
                    <el-input type="text" v-model="searchForm.goodsBarcode" class="formTableInput" placeholder="请输入货品条码"></el-input>
                </div>
                <div class="search-item">
                    <el-checkbox v-model="searchForm.showDisabled">停用商品显示</el-checkbox>
                </div>
                <div class="search-item">
                    <el-checkbox v-model="searchForm.filterZeroStock">零库存商品过滤</el-checkbox>
                </div>
            </div>
            <!-- 操作按钮区域 -->
            <div class="buttonBlock">
                <el-button type="default" v-on:click="exportTable">导出</el-button>
                <el-button type="default" v-on:click="refreshTable">刷新</el-button>
                <el-button type="default" v-on:click="resetForm">重置</el-button>
                <el-button type="primary" v-on:click="searchTable">查询</el-button>
            </div>
        </div>

        <!-- 统计卡片区域 -->
        <div class="stats-cards">
            <div class="card">
                <div class="card-value">{{inventoryInquiry.availableInventoryQty}}</div>
                <div class="card-label">当前库存数量</div>
            </div>
            <div class="card">
                <div class="card-value">{{inventoryInquiry.priceAvailableInventoryQty}}</div>
                <div class="card-label">当前库存金额</div>
            </div>
            <div class="card">
                <div class="card-value" style="color: green;">{{inventoryInquiry.inStockQuantity}}</div>
                <div class="card-label">入库数量</div>
            </div>
            <div class="card">
                <div class="card-value" style="color: orange;">{{inventoryInquiry.outStockQuantity}}</div>
                <div class="card-label">出库数量</div>
            </div>
            <div class="card">
                <div class="card-value" style="color: green;">{{inventoryInquiry.unInStockQuantity}}</div>
                <div class="card-label">待入库</div>
            </div>
            <div class="card">
                <div class="card-value" style="color: orange;">{{inventoryInquiry.totalPlannedQuantity}}</div>
                <div class="card-label">待出库</div>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="btnAndTable">
            <el-table :data="paginatedData"
                      style="width: 100%; margin-top: 10px"
                      ref="multipleTable"
                      stripe
                      border>
                <el-table-column type="" width="50"></el-table-column>
                <el-table-column prop="goodsCode"
                                 label="货品编号"
                                 width="150">
                </el-table-column>
                <el-table-column prop="goodsName"
                                 label="货品名称"
                                 width="120">
                </el-table-column>
                <el-table-column prop="status"
                                 label="状态"
                                 width="100">
                </el-table-column>
                <el-table-column prop="goodsTypeName"
                                 label="货品类型"
                                 width="120">
                </el-table-column>
                <el-table-column prop="specification"
                                 label="规格型号"
                                 width="120">
                </el-table-column>
                <el-table-column prop="warehouseName"
                                 label="仓库名称"
                                 width="120">
                </el-table-column>
                <el-table-column prop="storageLocationName"
                                 label="库位名称"
                                 width="120">
                </el-table-column>
                <el-table-column prop="currentInventory"
                                 label="当前库存"
                                 width="100">
                </el-table-column>
                <el-table-column prop="inventoryAmount"
                                 label="库存金额"
                                 width="100">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="130">
                    <template #default="scope">
                        <el-button class="operate-btn" link type="primary" size="default">出入库流水</el-button>
                        <el-button class="operate-btn" link type="primary" size="default">库存分布</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[10, 20, 50, 100]"
                           :total="total"
                           layout="total, sizes, prev, pager, next, jumper"
                           v-on:size-change="handleSizeChange"
                           v-on:current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, computed } = Vue;
    const { ElMessage, ElNotification } = ElementPlus;

    const app = createApp({
        setup() {
            // -------------------------- 1. 基础数据初始化 --------------------------
            // 搜索表单
            const searchForm = ref({
                goodsName: '',
                goodsType: '',
                unit: '',
                warehouseName: '',
                goodsBarcode: '',
                showDisabled: false,
                filterZeroStock: false
            });
            const inventoryInquiry=ref({
                totalPlannedQuantity:0,//计划出库数量
                availableInventoryQty:0,//可用库存
                priceAvailableInventoryQty:0,//当前库存金额
                outStockQuantity:0,  //已出库数量
                inStockQuantity:0,//入库数量
                unInStockQuantity:0 //未入库数量
            })
             // 初始化加载数据
            const refreshData = async () => {
                try {
                    const response = await axios.post('/InventoryInquiry/IICAII');
                    if (response.data.code === 200) {
                        inventoryInquiry.value = response.data.data;
                    }
                     const responsePIIU = await axios.post('/InventoryInquiry/PIIU');
                    if (responsePIIU.data.code === 200) {
                        tableData.value = responsePIIU.data.data;
                    }
                } catch (error) {
                    ElMessage.error('数据加载失败，请重试');
                }
            };
            // 表格数据
            const tableData = ref([]);

            // 表格实例
            const multipleTable = ref(null);

            // -------------------------- 2. 分页逻辑 --------------------------
            const currentPage = ref(1);
            const pageSize = ref(10);
            const total = computed(() => tableData.value.length);
            const paginatedData = computed(() => {
                const start = (currentPage.value - 1) * pageSize.value;
                const end = start + pageSize.value;
                return tableData.value.slice(start, end);
            });

            const handleSizeChange = (val) => {
                pageSize.value = val;
                currentPage.value = 1;
            };

            const handleCurrentChange = (val) => {
                currentPage.value = val;
                if (multipleTable.value) {
                    multipleTable.value.clearSelection();
                }
            };

            // -------------------------- 3. 状态转换辅助方法 --------------------------
            // 根据状态值获取样式类
            const getStatusClass = (status) => {
                return status === '1' ? 'status-approved' : 'status-closed';
            };

            // -------------------------- 4. 核心操作方法 --------------------------
            // 刷新数据
            const refreshTable = () => {
                if (multipleTable.value) {
                    multipleTable.value.clearSelection();
                }
                currentPage.value = 1;
                ElMessage({ type: 'success', message: '表格已刷新！' });
            };

            // 重置表单
            const resetForm = () => {
                searchForm.value = {
                    goodsName: '',
                    goodsType: '',
                    unit: '',
                    warehouseName: '',
                    goodsBarcode: '',
                    showDisabled: false,
                    filterZeroStock: false
                };
                refreshTable();
            };

            // 查询
            const searchTable = () => {
                // 这里模拟查询逻辑，实际项目中需对接后端接口
                ElMessage({ type: 'success', message: '查询条件已应用！' });
            };

            // 导出
            const exportTable = () => {
                ElMessage({ type: 'success', message: '导出请求已触发，正在下载...' });
            };

            // 页面挂载
            onMounted(() => {
                refreshData();
                ElMessage.success('库存数据加载成功');
            });

            // 暴露数据和方法
            return {
                searchForm,
                tableData,
                paginatedData,
                multipleTable,
                currentPage,
                pageSize,
                total,
                handleSizeChange,
                handleCurrentChange,
                getStatusClass,
                refreshTable,
                resetForm,
                searchTable,
                exportTable,
                inventoryInquiry,
            };
        }
    });
    app.use(ElementPlus);
    app.mount('#app');
</script>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        background-color: #f5f7fa;
    }

    #tableBlock {
        margin: 20px auto;
        width: 100%;
        max-width: max-content;
        padding-bottom: 20px;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 6px;
    }

    .search-area {
        padding: 20px;
        border-bottom: 0px solid #ebeef5;
    }

    .formTableInput, .formTableSelect {
        display: inline-block;
        width: 180px;
    }

    .buttonBlock {
        height: 40px;
        width: 100%;
        padding: 20px;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;
    }

    .operate-btn {
        margin-right: 8px;
    }

    .btnAndTable {
        margin: 0 auto;
        padding: 0 20px;
    }

    .search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 15px;
    }

    .search-item {
        display: flex;
        align-items: center;
    }

        .search-item label {
            min-width: 80px;
            text-align: right;
            margin-right: 10px;
        }

    .status-tag {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
    }

    .status-approved {
        background-color: #f6ffed;
        color: #52c41a;
    }

    .status-closed {
        background-color: #f5f5f5;
        color: #8c8c8c;
    }

    /* 时间标签栏样式 */
    .time-tabs {
        display: flex;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .time-btn {
        background: none;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        margin-right: 5px;
        border-radius: 4px;
    }

        .time-btn.active {
            background: #2f5496;
            color: #fff;
        }

    /* 统计卡片样式 */
    .stats-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 20px 20px;
    }

    .card {
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        padding: 15px;
        min-width: 150px;
        text-align: center;
    }

    .card-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .card-label {
        font-size: 14px;
        color: #666;
    }
</style>
